CSS இறக்குமதி விதி: இறக்குமதி மேலாண்மை மற்றும் செயல்படுத்தலுக்கான ஒரு விரிவான வழிகாட்டி

வலை மேம்பாட்டு உலகில், காஸ்கேடிங் ஸ்டைல் ஷீட்ஸ் (CSS) வலைப்பக்கங்களின் காட்சி விளக்கத்தை வரையறுப்பதில் முக்கிய பங்கு வகிக்கிறது. இணையதளங்கள் சிக்கலானதாக வளரும்போது, CSS குறியீட்டை நிர்வகிப்பது பெருகிய முறையில் சவாலாகிறது. @import விதியானது CSS ஸ்டைல்ஷீட்களை ஒழுங்கமைப்பதற்கும் மாடுலரைஸ் செய்வதற்கும் ஒரு அடிப்படை வழிமுறையை வழங்குகிறது. இந்த விரிவான வழிகாட்டி @import விதியின் நுணுக்கங்களை ஆராய்கிறது, அதன் செயல்பாடு, சிறந்த நடைமுறைகள், செயல்திறன் பரிசீலனைகள் மற்றும் மாற்று அணுகுமுறைகளை ஆராய்கிறது. உங்கள் CSS இறக்குமதிகளை திறம்பட நிர்வகிக்க நீங்கள் தெரிந்து கொள்ள வேண்டிய அனைத்தையும் நாங்கள் உள்ளடக்குவோம், இது மேலும் பராமரிக்கக்கூடிய, திறமையான மற்றும் அளவிடக்கூடிய திட்டங்களுக்கு வழிவகுக்கும்.

CSS @import விதியைப் புரிந்துகொள்வது

@import விதியானது ஒரு CSS கோப்பிற்குள் வெளிப்புற ஸ்டைல்ஷீட்களைச் சேர்க்க உங்களை அனுமதிக்கிறது. நீங்கள் HTML இல் <script> டேக்கைப் பயன்படுத்தி ஜாவாஸ்கிரிப்ட் கோப்புகளைச் சேர்ப்பது போன்றது இது. @import ஐப் பயன்படுத்துவதன் மூலம், உங்கள் CSS ஐ சிறிய, நிர்வகிக்க எளிதான கோப்புகளாகப் பிரிக்கலாம், இது உங்கள் ஸ்டைல்களைப் படிப்பது, புரிந்துகொள்வது மற்றும் புதுப்பிப்பதை எளிதாக்குகிறது.

அடிப்படை தொடரியல்

@import விதியின் அடிப்படை தொடரியல் நேரடியானது:

            @import 'style.css';
            

              
                Copy
              
            
          

அல்லது, ஒரு URL உடன்:

            @import url('https://example.com/style.css');
            

              
                Copy
              
            
          

URL ஆனது சார்பு அல்லது முழுமையானதாக இருக்கலாம். ஒரு சார்பு URL ஐப் பயன்படுத்தும் போது, அது @import விதி எழுதப்பட்ட CSS கோப்பின் இருப்பிடத்தைப் பொறுத்து தீர்க்கப்படுகிறது. உதாரணமாக, உங்கள் முக்கிய ஸ்டைல்ஷீட் (main.css) ரூட் டைரக்டரியில் இருந்தால் மற்றும் நீங்கள் `css` டைரக்டரியில் இருந்து ஒரு ஸ்டைல்ஷீட்டை இறக்குமதி செய்தால், பாதை இப்படி இருக்கலாம்: @import 'css/elements.css';

@import விதிகளை வைப்பது

முக்கியமாக, @import விதிகள் உங்கள் CSS கோப்பின் একেবারে தொடக்கத்தில், வேறு எந்த CSS விதிகளுக்கும் முன் வைக்கப்பட வேண்டும். வேறு எந்த விதிக்குப் பிறகும் அவற்றை வைத்தால், இறக்குமதி எதிர்பார்த்தபடி செயல்படாமல் போகலாம், இது எதிர்பாராத ஸ்டைலிங் நடத்தைகளுக்கு வழிவகுக்கும். தவறான நடைமுறையின் பின்வரும் உதாரணத்தைக் கவனியுங்கள்:

            /* This is incorrect */
body {
  font-family: sans-serif;
}

@import 'elements.css';
            

              
                Copy
              
            
          

கீழே உள்ள சரிசெய்யப்பட்ட உதாரணம் சரியான வரிசையைக் காட்டுகிறது:

            /* This is correct */
@import 'elements.css';

body {
  font-family: sans-serif;
}
            

              
                Copy
              
            
          

@import ஐப் பயன்படுத்துவதன் நன்மைகள்

@import விதியைப் பயன்படுத்துவது CSS ஐ நிர்வகிப்பதற்கு பல நன்மைகளை வழங்குகிறது:

• அமைப்பு: உங்கள் CSS ஐ செயல்பாட்டின் அடிப்படையில் தனித்தனி கோப்புகளாகப் பிரிப்பது (எ.கா., அச்சுக்கலை, தளவமைப்பு, கூறுகள்) உங்கள் குறியீட்டை வழிநடத்துவதையும் புரிந்துகொள்வதையும் எளிதாக்குகிறது.
• பராமரிப்பு: ஸ்டைல்கள் பிரிக்கப்பட்டிருக்கும் போது, குறிப்பிட்ட கூறுகளுக்கான மாற்றங்கள் அல்லது புதுப்பிப்புகளைச் செயல்படுத்துவது மற்றும் சோதிப்பது எளிது. இது எதிர்பாராத பக்க விளைவுகளின் வாய்ப்பைக் குறைக்கிறது.
• மறுபயன்பாடு: CSS கோப்புகளை பல பக்கங்கள் அல்லது திட்டங்களில் மீண்டும் பயன்படுத்தலாம், இது தேவையற்றதை குறைத்து நிலைத்தன்மையை ஊக்குவிக்கிறது.
• கூறுபாடு: கூறுபாடு அணுகுமுறை, முழு ஸ்டைல்ஷீட்டையும் பாதிக்காமல் தனிப்பட்ட ஸ்டைல் கோப்புகளைச் சேர்க்க, அகற்ற அல்லது மாற்ற உங்களை அனுமதிக்கிறது (நீங்கள் கோப்புகளை நன்கு கட்டமைத்திருந்தால்).

திறமையான @import பயன்பாட்டிற்கான சிறந்த நடைமுறைகள்

@import குறிப்பிடத்தக்க நன்மைகளை வழங்கினாலும், சிறந்த நடைமுறைகளைப் பின்பற்றுவது திறமையான மற்றும் பராமரிக்கக்கூடிய CSS குறியீட்டை உறுதி செய்கிறது:

உங்கள் CSS கோப்புகளை ஒழுங்கமைத்தல்

ஒரு நன்கு ஒழுங்கமைக்கப்பட்ட CSS கட்டமைப்பு ஒரு பராமரிக்கக்கூடிய திட்டத்தின் அடித்தளமாகும். இந்த உத்திகளைக் கவனியுங்கள்:

• கூறு அடிப்படையிலான கட்டமைப்பு: மீண்டும் பயன்படுத்தக்கூடிய கூறுகளுக்கு (எ.கா., பொத்தான்கள், வழிசெலுத்தல் பட்டைகள், படிவங்கள்) தனித்தனி கோப்புகளை உருவாக்கவும். இது குறியீடு மறுபயன்பாட்டை ஊக்குவிக்கிறது மற்றும் புதுப்பிப்புகளை எளிதாக்குகிறது. உதாரணமாக:
  • buttons.css
  • navigation.css
  • forms.css
• செயல்பாட்டு கட்டமைப்பு: CSS செயல்பாட்டின் அடிப்படையில் கோப்புகளை ஒழுங்கமைக்கவும். உதாரணமாக:
  • typography.css (எழுத்துரு ஸ்டைல்கள், தலைப்புகள் மற்றும் பத்திகளுக்கு)
  • layout.css (கட்டம், ஃப்ளெக்ஸ்பாக்ஸ் மற்றும் நிலைப்படுத்தலுக்கு)
  • utilities.css (உதவி வகுப்புகள் மற்றும் பயன்பாட்டு ஸ்டைல்களுக்கு)
• பெயரிடும் மரபுகள்: உங்கள் CSS கோப்புகளின் நோக்கத்தை எளிதில் அடையாளம் காண ஒரு நிலையான பெயரிடும் மரபைப் பயன்படுத்தவும். `_` (மற்ற கோப்புகளில் இறக்குமதி செய்யப்பட வேண்டிய பகுதிகளுக்கு) போன்ற முன்னொட்டுகளைப் பயன்படுத்துவதைக் கவனியுங்கள் அல்லது அவற்றின் உள்ளடக்கங்களை விவரிக்கும் சொற்பொருள் பெயர்களைப் பயன்படுத்தவும்.

இறக்குமதி வரிசை

உங்கள் CSS கோப்புகளை நீங்கள் இறக்குமதி செய்யும் வரிசை மிக முக்கியமானது. இது முன்னுரிமையின் வரிசையை ஆணையிடுகிறது மற்றும் ஸ்டைல்கள் சரியாகப் பயன்படுத்தப்படுவதை உறுதி செய்கிறது. ஒரு பொதுவான முறை கோப்புகளை ஒரு தர்க்கரீதியான வரிசையில் இறக்குமதி செய்வதாகும், அதாவது:

1. மீட்டமை/இயல்பாக்கு: வெவ்வேறு உலாவிகளில் ஒரு நிலையான அடித்தளத்தை வழங்க ஒரு CSS மீட்டமைப்பு அல்லது இயல்பாக்குதல் ஸ்டைல்ஷீட்டுடன் தொடங்கவும்.
2. அடிப்படை ஸ்டைல்கள்: அச்சுக்கலை, வண்ணங்கள் மற்றும் அடிப்படை கூறுகளுக்கான உலகளாவிய ஸ்டைல்களைச் சேர்க்கவும்.
3. கூறு ஸ்டைல்கள்: தனிப்பட்ட கூறுகளுக்கான ஸ்டைல்களை இறக்குமதி செய்யவும்.
4. தளவமைப்பு ஸ்டைல்கள்: பக்க தளவமைப்பு மற்றும் கட்டம் அமைப்புகளுக்கான ஸ்டைல்களை இறக்குமதி செய்யவும்.
5. தீம்-குறிப்பிட்ட ஸ்டைல்கள் (விருப்பத்தேர்வு): பொருந்தினால், தீம்களுக்கான ஸ்டைல்களை இறக்குமதி செய்யவும்.
6. மேலெழுதுதல் ஸ்டைல்கள்: மேலே இறக்குமதி செய்யப்பட்ட மற்ற ஸ்டைல்களை மேலெழுத வேண்டிய எந்த ஸ்டைல்களும்.

உதாரணமாக:

            @import 'reset.css';
@import 'base.css';
@import 'typography.css';
@import 'buttons.css';
@import 'layout.css';
@import 'theme-dark.css';
            

              
                Copy
              
            
          

அதிகப்படியான இறக்குமதியைத் தவிர்த்தல்

கூறுபாடு அவசியமானாலும், @import விதிகளை அதிகப்படியாக நெஸ்டிங் செய்வதைத் தவிர்க்கவும், இது அதிகப்படியான இறக்குமதி என்றும் அழைக்கப்படுகிறது. இது HTTP கோரிக்கைகளின் எண்ணிக்கையை அதிகரிக்கலாம் மற்றும் பக்க ஏற்றுதல் நேரத்தை மெதுவாக்கலாம், குறிப்பாக பழைய உலாவிகளில். ஒரு கோப்பு ஏற்கனவே மற்றொரு இறக்குமதியில் சேர்க்கப்பட்டிருந்தால், குறிப்பிட்ட ஸ்டைல்களை மேலெழுத முற்றிலும் அவசியமில்லாவிட்டால் அதை மீண்டும் இறக்குமதி செய்யத் தேவையில்லை.

செயல்திறன் பரிசீலனைகள்

@import விதி நிறுவனரீதியான நன்மைகளை வழங்கினாலும், அது விவேகமாகப் பயன்படுத்தப்படாவிட்டால் பக்க செயல்திறனையும் பாதிக்கலாம். இந்த சாத்தியமான செயல்திறன் சிக்கல்களைப் புரிந்துகொண்டு தணிப்பது மிக முக்கியம்.

HTTP கோரிக்கைகள்

ஒவ்வொரு @import விதியும் ஒரு கூடுதல் HTTP கோரிக்கையைச் சேர்க்கிறது, இது ஆரம்ப பக்க ஏற்றத்தை மெதுவாக்கலாம், குறிப்பாக உங்களிடம் பல இறக்குமதி செய்யப்பட்ட கோப்புகள் இருந்தால். உலாவி பக்கத்தை ரெண்டர் செய்வதற்கு முன் ஒவ்வொரு இறக்குமதி செய்யப்பட்ட ஸ்டைல்ஷீட்டிற்கும் தனித்தனி கோரிக்கைகளைச் செய்ய வேண்டும். HTTP கோரிக்கைகளைக் குறைப்பது வலை செயல்திறன் மேம்படுத்தலின் ஒரு அடிப்படைக் கொள்கையாகும்.

இணை பதிவிறக்கங்கள்

பழைய உலாவிகள் ஸ்டைல்ஷீட்களை வரிசையாக பதிவிறக்கம் செய்யலாம், இது ஏற்றுதல் நேரத்தை மேலும் அதிகரிக்கலாம். நவீன உலாவிகள் பொதுவாக ஆதாரங்களை இணையாக பதிவிறக்கம் செய்யலாம், ஆனால் @import விதி இன்னும் தாமதங்களை அறிமுகப்படுத்தலாம்.

செயல்திறனுக்காக @import க்கு மாற்றுகள்

@import இன் செயல்திறன் குறைபாடுகளைத் தணிக்க, பின்வரும் மாற்றுகளைக் கவனியுங்கள்:

• HTML இல் இணைப்பு குறிச்சொற்கள் (<link>): HTML <head> பிரிவில் நேரடியாகப் பயன்படுத்தப்படும் <link> குறிச்சொல், செயல்திறன் காரணங்களுக்காக @import ஐ விட பொதுவாக விரும்பப்படுகிறது. உலாவிகள் பெரும்பாலும் இணைக்கப்பட்ட ஸ்டைல்ஷீட்களை ஒரே நேரத்தில் பதிவிறக்கம் செய்யலாம். இந்த முறை வெளிப்புற CSS கோப்புகளைச் சேர்ப்பதற்கான நிலையான வழியாகும் மற்றும் சிறந்த செயல்திறனை வழங்குகிறது. உதாரணமாக:

              <head>
    <link rel="stylesheet" href="style.css">
    </head>
              
  
                
                  Copy
                
              
            

• CSS ப்ரீப்ராசசர்கள் (Sass, Less, Stylus): Sass, Less மற்றும் Stylus போன்ற CSS ப்ரீப்ராசசர்கள், கோப்பு இறக்குமதிகள் உட்பட மேம்பட்ட அம்சங்களை வழங்குகின்றன. ப்ரீப்ராசசர்கள் உங்கள் குறியீட்டை நிலையான CSS ஆக தொகுக்கின்றன, மேலும் இந்த தொகுப்பு செயல்பாட்டின் போது, அவை பெரும்பாலும் பல இறக்குமதி செய்யப்பட்ட கோப்புகளை ஒரே CSS கோப்பாக இணைக்கின்றன, இதன் மூலம் HTTP கோரிக்கைகளைக் குறைக்கின்றன. இது பெரும்பாலும் நவீன வலை மேம்பாட்டிற்கு விரும்பப்படும் முறையாகும். உதாரணமாக, Sass ஐப் பயன்படுத்தி:

              // In your main.scss file:
  @import 'buttons';
  @import 'layout';
  
  //The preprocessor generates a single style.css file.
              
  
                
                  Copy
                
              
            

• தொகுத்தல்/சிறிதாக்குதல் கருவிகள்: உங்கள் CSS கோப்புகளைத் தொகுக்கவும் சிறிதாக்கவும் உருவாக்கக் கருவிகளைப் (எ.கா., Webpack, Parcel, Gulp) பயன்படுத்தவும். இந்த கருவிகள் பல CSS கோப்புகளை ஒரே, சிறிய கோப்பாக இணைத்து, கோப்பு அளவைக் குறைக்கவும் ஏற்றுதல் நேரத்தை மேம்படுத்தவும் தேவையற்ற எழுத்துக்களை (வெள்ளை இடம், கருத்துரைகள்) அகற்றலாம்.
• இன்லைன் CSS (கவனமாகப் பயன்படுத்தவும்): குறிப்பிட்ட சந்தர்ப்பங்களில், உங்கள் HTML க்குள் நேரடியாக CSS ஸ்டைல்களை இன்லைன் செய்யலாம். இது ஒரு தனி CSS கோப்பின் தேவையை நீக்குகிறது மற்றும் முக்கியமான ஸ்டைல்களுக்கு செயல்திறனை மேம்படுத்தலாம். இருப்பினும், இன்லைன் ஸ்டைல்களை அதிகமாகப் பயன்படுத்துவது உங்கள் குறியீட்டை பராமரிக்க கடினமாக்கும்.

மேம்பட்ட @import நுட்பங்கள்

அடிப்படை பயன்பாட்டிற்கு அப்பால், @import விதி பல மேம்பட்ட நுட்பங்களை ஆதரிக்கிறது:

நிபந்தனை இறக்குமதிகள்

ஊடக வினவல்களின் அடிப்படையில் நீங்கள் ஸ்டைல்ஷீட்களை நிபந்தனையுடன் இறக்குமதி செய்யலாம். இது சாதனம் அல்லது திரை அளவின் அடிப்படையில் வெவ்வேறு ஸ்டைல்களை ஏற்ற உங்களை அனுமதிக்கிறது. இது பதிலளிக்கக்கூடிய வடிவமைப்பிற்கு பயனுள்ளதாக இருக்கும். உதாரணமாக:

            @import url('mobile.css') screen and (max-width: 767px); /* For mobile devices */
@import url('desktop.css') screen and (min-width: 768px); /* For desktop devices */
            

              
                Copy
              
            
          

இது ஒவ்வொரு சாதனத்திற்கும் தேவையான ஸ்டைல்ஷீட்கள் மட்டுமே ஏற்றப்படுவதை உறுதி செய்கிறது, செயல்திறன் மற்றும் பயனர் அனுபவத்தை மேம்படுத்துகிறது.

ஊடக வினவல்களுடன் இறக்குமதி செய்தல்

நீங்கள் ஒரு URL ஐக் குறிப்பிடாமல் ஊடக வினவல்களைப் பயன்படுத்தி ஸ்டைல்ஷீட்களை இறக்குமதி செய்யலாம், இதுபோல:

            @import 'print.css' print;
            

              
                Copy
              
            
          

குறிப்பிட்ட ஊடக வகைகளை இறக்குமதி செய்தல்

@import விதி ஒரு ஸ்டைல்ஷீட் பயன்படுத்தப்பட வேண்டிய ஊடக வகையைக் குறிப்பிட உங்களை அனுமதிக்கிறது. இது <link> குறிச்சொல்லில் ஊடக வினவல்களைப் பயன்படுத்துவதைப் போன்றது. எடுத்துக்காட்டுகளில் screen, print, speech, போன்றவை அடங்கும். இது வெவ்வேறு சூழல்களில் பயன்படுத்தப்படும் ஸ்டைல்கள் மீது சிறந்த கட்டுப்பாட்டை வழங்குகிறது.

            @import url('print.css') print; /* Styles for printing */
            

              
                Copy
              
            
          

CSS அமைப்பிற்கான மாற்று அணுகுமுறைகள்

@import ஒரு சரியான முறையாக இருந்தாலும், மற்ற அணுகுமுறைகள் பெரும்பாலும் சிறந்த செயல்திறன் மற்றும் பராமரிப்பை வழங்குகின்றன. சிறந்த அணுகுமுறையைத் தேர்ந்தெடுப்பது உங்கள் திட்டத்தின் சிக்கலான தன்மை மற்றும் உங்கள் மேம்பாட்டு பணிப்பாய்வைப் பொறுத்தது.

CSS ப்ரீப்ராசசர்கள் (Sass, Less, Stylus)

CSS ப்ரீப்ராசசர்கள் மூல CSS ஐ விட குறிப்பிடத்தக்க நன்மைகளை வழங்குகின்றன, இதில் கோப்பு இறக்குமதி திறன்கள், மாறிகள், நெஸ்டிங், மிக்சின்கள் மற்றும் செயல்பாடுகள் ஆகியவை அடங்கும். அவை நவீன வலை மேம்பாட்டிற்கான ஒரு பிரபலமான தேர்வாகும்.

• Sass (Syntactically Awesome Style Sheets): Sass என்பது பரவலாகப் பயன்படுத்தப்படும் ஒரு ப்ரீப்ராசசர் ஆகும், இது இரண்டு தொடரியல் விருப்பங்களை வழங்குகிறது: SCSS (Sassy CSS, இது CSS இன் ஒரு சூப்பர்செட்) மற்றும் உள்தள்ளப்பட்ட தொடரியல்.
• Less (Leaner Style Sheets): Less என்பது மற்றொரு பிரபலமான ப்ரீப்ராசசர் ஆகும், இது Sass க்கு ஒத்த அம்சங்களை வழங்குகிறது.
• Stylus: Stylus என்பது அதன் குறைந்தபட்ச தொடரியலுக்காக அறியப்பட்ட ஒரு நெகிழ்வான மற்றும் வெளிப்படையான ப்ரீப்ராசசர் ஆகும்.

ப்ரீப்ராசசர்களுடன், இறக்குமதி அறிக்கைகள் தொகுப்பு செயல்பாட்டின் போது கையாளப்படுகின்றன, அங்கு அனைத்து இறக்குமதி செய்யப்பட்ட கோப்புகளும் ஒரே, மேம்படுத்தப்பட்ட CSS கோப்பாக இணைக்கப்படுகின்றன. இந்த அணுகுமுறை @import விதியின் செயல்திறன் குறைபாடுகளை நீக்குகிறது.

CSS தொகுதிகள்

CSS தொகுதிகள் என்பது குறிப்பிட்ட கூறுகளுக்கு CSS ஐ வரையறுக்கும் ஒரு நுட்பமாகும். அவை ஸ்டைல் முரண்பாடுகளைத் தடுக்க தானாகவே தனித்துவமான வகுப்பு பெயர்களை உருவாக்குகின்றன. இது பெரிய, சிக்கலான திட்டங்களில் குறிப்பாக நன்மை பயக்கும். CSS தொகுதிகள் பெரும்பாலும் React, Vue.js மற்றும் Angular போன்ற ஜாவாஸ்கிரிப்ட் கட்டமைப்புகளுடன் இணைந்து பயன்படுத்தப்படுகின்றன.

CSS-in-JS

CSS-in-JS நூலகங்கள் (எ.கா., styled-components, Emotion, JSS) உங்கள் ஜாவாஸ்கிரிப்ட் குறியீட்டிற்குள் நேரடியாக CSS ஐ எழுத உங்களை அனுமதிக்கின்றன. இந்த அணுகுமுறை கூறு-நிலை ஸ்டைலிங், ஜாவாஸ்கிரிப்ட் மாறிகளின் அடிப்படையில் டைனமிக் ஸ்டைலிங் மற்றும் தானியங்கி முக்கியமான CSS உருவாக்கம் போன்ற நன்மைகளை வழங்குகிறது. இது ஜாவாஸ்கிரிப்ட் கட்டமைப்புகளைப் பயன்படுத்தும் திட்டங்களுக்கு குறிப்பாக உதவியாக இருக்கும்.

நடைமுறை எடுத்துக்காட்டுகள் மற்றும் செயல்படுத்தல்

ஒரு வலைத்தள கட்டமைப்பின் நடைமுறை எடுத்துக்காட்டுடன் @import விதியை விளக்குவோம்:

திட்ட கட்டமைப்பு:

            /project
  index.html
  style.css
  /css
    reset.css
    base.css
    typography.css
    buttons.css
    layout.css
            

              
                Copy
              
            
          

style.css (முக்கிய ஸ்டைல்ஷீட்):

            @import 'css/reset.css';
@import 'css/base.css';
@import 'css/typography.css';
@import 'css/buttons.css';
@import 'css/layout.css';
            

              
                Copy
              
            
          

css/reset.css (உதாரணம் - ஒரு அடிப்படை மீட்டமைப்பு):

            /* Eric Meyer's Reset */
hatml, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
            

              
                Copy
              
            
          

css/base.css (உதாரணம் - அடிப்படை ஸ்டைலிங்):

            body {
  font-family: sans-serif;
  background-color: #f4f4f4;
  color: #333;
  line-height: 1.6;
}

a {
  color: #007bff;
  text-decoration: none;
}

            

              
                Copy
              
            
          

css/typography.css (உதாரணம் - அச்சுக்கலை தொடர்பான ஸ்டைலிங்):

            h1, h2, h3 {
  margin-bottom: 1rem;
  font-weight: bold;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

p {
  margin-bottom: 1rem;
}

            

              
                Copy
              
            
          

index.html (உதாரணம்):

            <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Import Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Welcome to My Website</h1>
  </header>
  <main>
    <p>This is a sample paragraph.</p>
    <button class="btn btn-primary">Click Me</button>
  </main>
</body>
</html>
            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், style.css கோப்பு மற்ற அனைத்து CSS கோப்புகளையும் இறக்குமதி செய்கிறது, இது ஒரு தெளிவான மற்றும் ஒழுங்கமைக்கப்பட்ட கட்டமைப்பை நிறுவுகிறது. HTML கோப்பு <link> குறிச்சொல்லைப் பயன்படுத்தி முக்கிய ஸ்டைல்ஷீட்டை உள்ளடக்கியுள்ளது.

முடிவு: @import மற்றும் அதற்கு அப்பால் உள்ளவற்றைப் பயன்படுத்துதல்

CSS @import விதி உங்கள் CSS குறியீட்டை ஒழுங்கமைக்க ஒரு பயனுள்ள கருவியாக உள்ளது. இருப்பினும், அதன் செயல்திறன் தாக்கங்களைக் கருத்தில் கொண்டு, CSS ப்ரீப்ராசசர்கள் (Sass, Less, Stylus), CSS தொகுதிகள் மற்றும் CSS-in-JS தீர்வுகள் போன்ற பிற, பெரும்பாலும் சிறந்த, மாற்றுகளுக்கு எதிராக அதன் பயன்பாட்டை எடைபோடுங்கள். இந்த மாற்றுகள் பொதுவாக பெரிய திட்டங்களுக்கு சிறந்த செயல்திறன், பராமரிப்பு மற்றும் அளவிடுதல் ஆகியவற்றை வழங்குகின்றன. சிறிய திட்டங்களுக்கு அல்லது CSS அமைப்பைப் பற்றி அறிய @import ஒரு நல்ல தொடக்கப் புள்ளியாக இருக்க முடியும் என்றாலும், பெரும்பாலான நவீன வலை மேம்பாட்டு பணிப்பாய்வுகளுக்கு, ஒரு ப்ரீப்ராசசர் அல்லது ஒரு மேம்பட்ட நுட்பத்தைப் பயன்படுத்துவது பொதுவாக பரிந்துரைக்கப்படுகிறது. @import விதி மற்றும் அதன் மாற்றுகளுடன் தொடர்புடைய நன்மைகள், வரம்புகள் மற்றும் சிறந்த நடைமுறைகளைப் புரிந்துகொள்வதன் மூலம், உங்கள் CSS குறியீட்டை நிர்வகிப்பது மற்றும் ஒழுங்கமைப்பது பற்றி தகவலறிந்த முடிவுகளை எடுக்கலாம், இது மேலும் வலுவான மற்றும் திறமையான வலை மேம்பாட்டிற்கு வழிவகுக்கும்.

உங்கள் வலை பயன்பாடுகளை வடிவமைக்கும் மற்றும் உருவாக்கும் போது எப்போதும் செயல்திறன், பராமரிப்பு மற்றும் அளவிடுதல் ஆகியவற்றிற்கு முன்னுரிமை அளிக்க நினைவில் கொள்ளுங்கள். உங்கள் திட்டத்தின் சிக்கலான தன்மை மற்றும் உங்கள் குழுவின் நிபுணத்துவத்திற்கு சிறந்த அணுகுமுறையைத் தேர்வுசெய்யுங்கள்.

இந்த வழிகாட்டியை திறமையான CSS இறக்குமதி நிர்வாகத்திற்கான உங்கள் தொடக்கப் புள்ளியாகக் கருதுங்கள். வெவ்வேறு அணுகுமுறைகளுடன் பரிசோதனை செய்யுங்கள், உங்களுக்கு எது சிறந்தது என்பதைக் கண்டறியுங்கள். நல்ல அதிர்ஷ்டம், மற்றும் மகிழ்ச்சியான குறியீட்டு முறை!